<template>
  <div class="user-wrapper" ref="userInfoRef">
    <!-- 编辑按钮 -->
    <div class="user-edit">
      <svg-icon icon-class="evaluate" color="#ffffff" style="width: 23px; height: 23px"></svg-icon>
    </div>
    <!-- user -->
    <div class="user-infoWrapper">
      <template v-if="isLogin">
        <!-- logo -->
        <div class="user-logo">
          <van-image round width="96px" height="96px" :src="getImgUrl('user-logo.png')" />
        </div>
        <h3>
          {{ userInfo.nickName }}
          <span class="user-integral">
            <svg-icon icon-class="star" color="#ffffff"></svg-icon>
            <span class="text">{{ userInfo.integration }}</span>
          </span>
        </h3>
        <p>ID:{{ userInfo.ID }}</p>
        <div class="user-list">
          <div class="user-item" v-for="item in userAccountList">
            <span class="user-item-text">{{ item.text }}</span>
            <h5>{{ item.quantitation }}</h5>
          </div>
        </div>
      </template>
      <template v-else>
        <!-- logo -->
        <div class="user-logo">
          <van-image round width="96px" height="96px" :src="getImgUrl('user-default.jpg')" />
        </div>
        <van-button type="success" color="#3cb677" style="margin: 20px 0" @click="goPage('login')"
          >立即登陆/注册</van-button
        >
      </template>
    </div>
    <!-- 配置列表 -->
    <div class="user-configWrapper">
      <van-cell is-link v-for="item in userConfigList">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="user-icon" :style="{ backgroundColor: item.iconBg }">
            <svg-icon
              :icon-class="item.iconName"
              color="#fff"
              style="width: 18px; height: 18px"
            ></svg-icon>
          </span>
          <span class="custom-title">{{ item.configName }}</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, toRefs, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { IGlobalState } from '@/store'
import * as Types from '@/store/action-types'
import { getImgUrl } from '@utils/index'
export default defineComponent({
  setup() {
    const router = useRouter()
    // store 专门修改分类使用
    let store = useStore<IGlobalState>()
    let isLogin = computed(() => store.state.user.isLogin)
    let userInfo = computed(() => store.state.user.userInfo.userInfo)
    let userAccountList = computed(() => store.state.user.userInfo.userAccountList)
    let userConfigList = computed(() => store.state.user.userInfo.userConfigList)
  

    //跳转页面
    const goPage = (pageName: string) => {
      router.push({
        path: '/' + pageName,
      })
    }
    //用户数据
    //1.看vuex是否登陆有
    //2.没有数据发请求 获取userInfo
    const getUserInfo = () => {
      store.dispatch(`user/${Types.GET_USERINFO}`)
    }

    onBeforeMount(async () => {
      if (!userInfo.ID) {
        getUserInfo()
      }
    })
    return {
      isLogin,
      userAccountList,
      userConfigList,
      userInfo,
      getImgUrl,
      goPage,
    }
  },
})
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
@import '@/styles/mixins.scss';
.user-wrapper {
  width: 100%;
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    border-radius: 0 0 50% 50%;
    margin: 0 auto;
    background: linear-gradient(180deg, #3cb677 33%, #c5e6d5, #f8f8f8 54%, #ffffff 88%);
    min-height: 300px;
    z-index: -1;
  }
  .user-edit {
    position: absolute;
    right: 2%;
    top: 3%;
    z-index: 10;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .user-infoWrapper {
    width: 92%;
    margin: 92px 4% 15px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
    @include flexCenter();
    padding-bottom: 5px;
    text-align: center;

    .user-logo {
      margin-top: -50px;
    }

    h3 {
      font-size: 24px;
      font-weight: normal;
      color: $second-font-color;
      margin: 10px 0;
      span {
        background-color: $bg-color-yellow;
        border-radius: 12px;
        color: #ffffff;
        font-size: 12px;
        padding: 1px 3px;
        transform: scale(0.95);
        display: inline-block;
      }
    }

    p {
      margin: 0px;
      color: $nomain-font-color;
      font-weight: normal;
      font-size: $fnSize14;
      width: 100%;
      padding-bottom: 10px;
      @include thinBorder();
    }
    .user-list {
      width: 100%;
      padding: 10px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .user-item {
        flex: 1;
        text-align: center;
        .user-item-text {
          color: $nomain-font-color;
          font-size: 14px;
        }
        h5 {
          font-weight: normal;
          color: $content-font-color;
          font-size: 21px;
          margin: 5px 0;
        }
      }
    }
  }
  .user-configWrapper {
    width: 92%;
    overflow: hidden;
    margin: 15px 4% 15px;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
    .user-icon {
      width: 24px;
      height: 24px;
      border-radius: 10px;
      text-align: center;
      margin-right: 10px;
      display: inline-block;
    }
  }
}
</style>
